<!-- 首页 -->
<template>
	<view class="theme-bg1">
		<nv :config="config"></nv>
		<view class="" style="top: 0;width: 100%;">
			<search @searchChange="searchChange" class="" ref="search"></search>
		</view>
		<!-- 流量主-腾讯广告 -->
		<!-- <ad unit-id="adunit-961458988ac9ad8b" ad-intervals="30"></ad> -->

		<!-- 内容板块 -->
		<view class="" style="margin: 0 20rpx;position: relative;overflow: hidden;">
			<view v-for="(item,index) in collections" :key="index" class="radius  bg-white margin-top"
				style="padding: 10rpx;background: #fff;border-radius: 20rpx;">
				<view class="cu-bar  " style=" overflow: hidden;">
					<view class="action sub-title">
						<view class="text-xl  "
							style="color: #000;font-weight: bold; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
							<view class="" style="position: relative; ">
								{{item.title}}
							</view>
						</view>
						<view class="" style="position: absolute;right: -503rpx;">

						</view>
						<text class="bg-green" style="left: 0; background: #ff7984;"></text>
					</view>
				</view>
				<view class="" style="">
					<view class="sskb sskc-view-1">
						<view v-for="(item1,index1) in item.childrens" :key="index1" class="sskb sskc-view-2"
							style="border-color: #E93939;box-shadow: #E93939 2rpx 0px 10rpx -2rpx;">
							<view class="sskb sskc-view-3" @tap="toChat(item1)">
								<text class="sskc sskc-view-4" style="color: #666666;">{{item1.title}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<tab-bar :currentPage="1"></tab-bar>
		<view class="ends"></view>
	</view>
</template>

<script>
	import search from "@/components/common/search.vue"
	import lsSwiper from '@/components/ls-swiper/index.vue'
	import {
		getWordList
	} from "@/api/lianai.js";
	import addTip from '@/components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
	export default {
		components: {
			search,
			lsSwiper,
		},
		data() {
			return {
				config: {
					title: "话术大全",
					color:"#ffffff"
				},
				collections: [],
				bannerList: [{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
					},
					{
						imgUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png'
					}
				],
			};
		},
		watch: {},
		mounted() {
			this.getTrick()
		},
		onLoad() {

		},
		methods: {
			//热门话语
			getTrick() {
				console.log('数据加载');
				uni.showLoading({title: '加载中'});
				getWordList({}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						console.log(res)
						this.collections = res.data;
					}
				})
			},
			searchChange(val) {
				if (val == 'isSearchLogin') {
					this.$refs['modal'].modalName = 'Modal'
					this.adShow = true
				}
			},
			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop;
			},
			toChat: function(item1) {
				console.log(item1)
				uni.navigateTo({
					url: "/pages/diction/detail?proId=" + item1.id

				})
			},
			// 分享小程序
			onShareAppMessage() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/diction/list'
				};
			},
			//分享到朋友圈
			onShareTimeline() {
				return {
					title: '「恋爱豆豆话术」100W+恋爱话术，拯救尬聊神器',
					path: '/pages/diction/list'
				}
			},
		}
	};
</script>
<!-- 内容样式 -->
<style scoped>
	.ends {
		padding: 35px;
	}

	.sskc-view-1 {
		margin-left: 25rpx;
		margin-right: 25rpx;
		padding-bottom: 15rpx;
		position: relative;
		display: flex;
		min-height: 40rpx;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.sskc-view-2 {
		min-height: 66rpx;
		border-radius: 50rpx;
		width: 30%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		margin-top: 30rpx;
	}

	.sskc-view-2:last-child {}

	.body_XQ39RG {
		background-color: rgba(245, 245, 245, 1);
	}

	.sskb-hslb-aa {
		min-height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;
		background-color: rgb(255, 255, 255);
		border-bottom: 1px solid rgb(239, 239, 239);
		border-bottom-color: rgba(239, 239, 239, 1);
	}

	.sskb-hslb-ab {
		min-height: 30px;
		margin-left: 10px;
		margin-right: 10px;
		background-color: rgba(239, 239, 239, 1);
		width: 100%;
		border-radius: 30px;
		padding-left: 15px;
		display: flex;
		align-items: center;
	}

	.sskb-hslb-acimage {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}
</style>

<style lang="scss" scoped>
	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
</style>
